/*
 * @Author: Choisaaaa
 * @Date: 2018/5/4  23:25
 * 商品种类列表组件
 */

import React from "react";
import {Link} from "react-router-dom";

import "./product-category-list.scss";
import Footer from "component/footer/footer.jsx";
import PageTitle from 'component/page-title/page-title.jsx';
import TableList from 'util/table-list/table-list.jsx';
import ProductCategory from 'service/product-category-service.jsx'
import MUtil from 'util/mm.jsx';

const _category = new ProductCategory();
const _mm = new MUtil();

class CategoryList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            categoryList : [],                                      //商品品类列表
            parentCategoryId : this.props.match.categoryId || 0     //商品品类的父类ID
        }
    }
    componentWillMount(){//组件将要加载
        this.mounted = true;
    }
    componentWillUnmount(){//组件销毁
        this.mounted = false;
    }
    componentDidMount(){
        this.loadCategoryList();
    }
    componentDidUpdate(prevProps,prevSate){//在本组件中点击查看子品类触发
        let oldPath = prevProps.location.pathname,
            newPath = this.props.location.pathname,
            newParentCategoryId = this.props.match.params.categoryId;
        if(oldPath != newPath){
            this.setState({
                parentCategoryId: newParentCategoryId
            },()=> {
                this.loadCategoryList();//重新渲染商品列表
            });
        }
    }
    loadCategoryList(){//加载商品种类列表
        _category.getCategoryList(
            this.state.parentCategoryId
        ).then((res) => {
            if(this.mounted){
                this.setState({
                    categoryList : res
                });
            }
        },(errMsg)=>{
            _mm.errorTips(errMsg)
        });
    }
    onUpdateName(categoryId,categoryName){//更新品类名称
        let newCategoryName = window.prompt("请输入新的品类名称",categoryName);
        if(newCategoryName == categoryName){
            return;
        }
        if(newCategoryName){
           _category.updateCategoryName({
               categoryId: categoryId,
               CategoryNewName : newCategoryName
           }).then((res) => {
               _mm.successTips(res);
               this.loadCategoryList();
           },(resMsg) => {
               _mm.errorTips(resMsg);
           } );
        }
    }
    render(){
        let tableHeader = [
            {name: "品类ID" ,width : "10%"},
            {name: "图片" ,width : "8%"},
            {name: "品类名称" ,width : "22%"},
            {name: "创建时间" ,width : "20%"},
            {name: "修改时间" ,width : "20%"},
            {name: "操作" ,width : "20%"}
        ];
        let ListBody = this.state.categoryList.map((category,index) => {
            return (
                <tr key={index}>
                    <td>{category.id}</td>
                    <td>
                        <img src={`${category.imageHost}${category.imageAddress}`} alt={category.productCategoryName} className="category-img" />
                    </td>
                    <td>{category.productCategoryName}</td>
                    <td>{category.createTime}</td>
                    <td>{category.lastEditTime}</td>
                    <td>
                        <a  className="category-operation" onClick={(e) => this.onUpdateName(category.id,category.productCategoryName) }>
                            <button type="button" className="btn btn-primary"> 修改名称</button>
                        </a>
                        {
                            category.parentId === 0
                            ?<Link to={`/product-category/index/${category.id}`}>
                                <button type="button" className="btn btn-info">查看子品类</button>
                            </Link>
                            : null
                        }
                    </td>

                </tr>
            )
        });
        return(
            <div id="page-wrapper">
                <PageTitle title="品类管理">
                    <div className="page-header-right">
                        <Link to="/product-category/add" className="btn btn-primary btn-lg">
                            <i className="fa fa-plus"/>
                            <span> 添加品类</span>
                        </Link>
                    </div>
                </PageTitle>
                <div className="row" >
                    <div className="col-md-4 parentCategoryId">
                        <input type="text" className="form-control"
                               readOnly
                               value={`父级品类ID: ${this.state.parentCategoryId}`}/>
                    </div>
                </div>
                <TableList tableHeads={tableHeader}>
                    {ListBody}
                </TableList>
                <Footer/>
            </div>
        );
    }
}
export default CategoryList;